<template>
<!--添加工作经历-->
  <div style="background-color: rgb(245, 245, 245);">
    <headers></headers>
    <div class="title">
      <div class="auto">首页  >  认证考试  >  个人账户信息  >  教育经历</div>
    </div>
    <div class="padding250">
      <div class="auto">
        <div class="content">
            <p class="titleName">教育经历</p>

          <div class="formWrapper" style="width: 100%">
            <Form :label-width="86" label-position="left" class="formMin" :rules="formValidate" ref="education" :model="education">
              <FormItem label="学校名称" prop="schoolName" style="width: 30%;">
                <Input  v-model="education.schoolName" size="large" placeholder="请输入学校名称"/>
              </FormItem>
              <FormItem label="学历" prop="qualifiCations" style="width: 30%;">
                <Select  v-model="education.qualifiCations" placeholder="请选择学历" size="large">
                  <Option v-for="item in educationList" :value="item.enumName">{{item.enumName}}</Option>
                </Select>
              </FormItem>
              <FormItem label="专业" prop="major" style="width: 30%;">
                <Select v-model="education.major" placeholder="请选择专业" size="large">
                  <Option v-for="item in professionList" :value="item.name">{{item.name}}</Option>
                </Select>
              </FormItem>
              <div class="dateContent clearfix">
                <FormItem prop="learnStartTimeString" label="就读时间" >
                  <DatePicker class="dateRight" v-model="education.learnStartTimeString" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 228px"></DatePicker>
                </FormItem>
                <FormItem prop="learnEndTimeString">
                  <DatePicker class="dateRight" v-model="education.learnEndTimeString" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 228px"></DatePicker>
                </FormItem>
              </div>
              <FormItem label="是否统招" prop="unified">
                <RadioGroup v-model="education.ecTag">
                  <Radio :label=1 >是</Radio>
                  <Radio :label=2 >否</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="毕业证书" prop="diplomasImage" style="width: 500px">
                <div>
                  <span class="upuser">
                    <Upload ref="diplomaup1"
                        :show-upload-list="false"
                        :format="['jpg','jpeg','png']"
                        :headers="{Authorization:token}"
                        action="http://localhost:9555/base/file/upload"
                        :max-size="3072"
                        :before-upload="beforeUpload"
                        :on-exceeded-size="handleMaxSize"
                        :on-success="diploma1Success"
                        :on-format-error="formatError">
                        <div class="upload">
                            <img class="showimg" :src="education.diplomasImage"  v-if="education.diplomasImage !== ''&& education.diplomasImage !== undefined"/>
                            <Icon v-else type="ios-add" size="110" color="#dbdbdb"/>
                        </div>
                    </Upload>
                  </span>
                </div>
                <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
              </FormItem>
              <FormItem label="证书编号" prop="diplomasNum">
                <InputNumber v-model="education.diplomasNum" size="large" placeholder="请输入毕业证书编号" style="width: 244px"/>
              </FormItem>
              <FormItem label="职称" style="width: 30%;">
                <Input  v-model="education.jobDescription" size="large" placeholder="请输入职称"/>
              </FormItem>
              <FormItem label="级别" style="width: 30%;">
                <Select v-model="education.gradeLeavel" placeholder="请选择级别" size="large">
                  <Option v-for="item in rankList" :value="item.name">{{item.name}}</Option>
                </Select>
              </FormItem>
              <FormItem label="职称证书" prop="jobImage" style="width: 500px">
                <div>
                  <span class="upload">
                    <Upload ref="academicImgup1"
                        :format="['jpg','jpeg','png']"
                        :show-upload-list="false"
                        :headers="{Authorization:token}"
                        :before-upload="beforeUpload"
                        action="http://localhost:9555/base/file/upload"
                        :max-size="3072"
                        :on-exceeded-size="handleMaxSize"
                        :on-success="academicImg1Success"
                        :on-format-error="formatError">
                        <div class="upload">
                            <img class="showimg" :src="education.jobImage"  v-if="education.jobImage !== ''&& education.jobImage !== undefined"/>
                            <Icon v-else type="ios-add" size="110" color="#dbdbdb"/>
                        </div>
                    </Upload>
                  </span>
                </div>
                <div class="upload_tip">提示：上传图片最大尺寸800px，大小为3M以内</div>
              </FormItem>
            </Form>
            <Button type="primary" class="save" v-on:click="addEducation()">保存并返回</Button>
            <Button type="primary" class="save" v-on:click="goBack" style="margin-left: 20px;width: 100px;background-color: #2d8cf0;border-color: #2d8cf0;">返回</Button>
          </div>
        </div>
      </div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">{{showTitle}}</div>
      </div>
    </Spin>
    <footers></footers>
  </div>

</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    /* 旋转效果 */
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
  .padding250 .auto{
    background-color: #fff;
    margin-top: 30px;
    text-align: left;
    .content{
      padding: 40px;
      .titleName{
        font-size: 20px;
        color: #000;
        margin-bottom: 40px;
      }

    }
  }
  .title{
    font-size: 14px;
    color: #fff;
    height: 60px;
    line-height: 60px;
    background-color: #2F261E;
    text-align: left;
  }
  .jobdesc{
    height:136px;width:700px;margin-bottom: 10px;
  }
  .showimg {
    display: inline-block;
    width: 244px;
    height: 200px;
    overflow: hidden;
    vertical-align: bottom;
  }
  .save{
    background-color: #B2936B;
    color: #fff;
    height: 50px;
    width: 200px;
    font-size: 16px;
    margin-left: 80px;
  }

  .formWrapper{
    width: 330px;
    .tipwords{
      font-size: 14px;
      color: #666;
    }
  }
  .upload {
    display: inline-block;
    cursor: pointer;
    background-color: #f9f9f9;
    border:1px dashed #e1e1e1;
    width: 200px;
    text-align: center;
  }
  .upload_tip{
    text-align: left;
    color: #FF0000;
  }
</style>
<script type="text/ecmascript-6">
  import {getUserEducation, addEducation} from "../../../http"
  import {getStore} from '../../../storage'
  import headers from '../../template/header'
  import footers from '../../template/footer'
    export default {
        name: 'addEducation',
        props: {},
        data() {
            return {
              showOrder: 'kaoshi',
              isSpinShow:false,
              showTitle: '加载中...',
              token:getStore('token'),
              education: {
                jobImage: '', //职称证书
                diplomasImage: '',  //毕业证书
                ecTag: 1,
                schoolName: '',
                qualifiCations: '',
                major: '',
                learnStartTime: '',
                learnEndTime: '',
                jobDescription: '',
                jobDescNum: '',
                qualifiLeavel: '',
                gradeLeavel: '',
                diplomasNum: '',
                learnStartTimeString: '',
                learnEndTimeString: ''
              },
              formValidate: {
                schoolName: [{required: true, message: "学校名称不能为空", trigger: "blur"}],
                qualifiCations: [{required: true, message: "请选择学历", trigger: "blur"}],
                major: [{required: true, message: "请选择专业", trigger: "blur"}],
                diplomasNum: [{required: true, type: 'number', message: "证书编号不能为空", trigger: "blur"}]
              },
              educationList: [],//学历
              rankList: [],//级别
              professionList: [],//专业
            };
        },
        methods: {
          goBack(){
            window.history.back();
          },
          beforeUpload(){
            this.showTitle = '文件上传中...'
            this.isSpinShow = true
          },
          //上传证件超出大小2M限制
          handleMaxSize (file) {
            this.isSpinShow = false
            this.showTitle = '加载中...'
            this.$Notice.warning({
              title: '证件上传失败',
              desc: '您上传的图片超过3M，无法上传。'
            });
          },
          //格式错误提醒
          formatError(){
            this.isSpinShow = false
            this.showTitle = '加载中...'
            this.$Notice.warning({
              title:"证件上传失败",
              desc:"图片格式错误，请上传图片",
              duration: 3,
            });
          },
          academicImg1Success(response){
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200){
              this.$set(this.education,'jobImage',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          academicImg2Success(response){
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200) {
              this.$set(this.education,'jobImage',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          diploma1Success(response){
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200){
              this.$set(this.education,'diplomasImage',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          //上传
          diploma2Success(response){
            this.isSpinShow = false
            this.showTitle = '加载中...'
            if(response.code === 200){
              this.$set(this.education,'diplomasImage',response.data.fileUrl);
            }else{
              this.$Notice.warning({
                title:'证件上传失败',
                desc:'上传不成功，请重新上传',
                duration: 3,
              });
            }
          },
          addEducation(){
            let that = this
            if(!this.education.schoolName){
              this.$Notice.warning({
                title: "新增教育经历提醒",
                desc: "请输入学校名称",
                duration: 3,
              });
              return
            }
            if(!this.education.qualifiCations){
              this.$Notice.warning({
                title: "新增教育经历提醒",
                desc: "请选择学历",
                duration: 3,
              });
              return
            }
            if(!this.education.major){
              this.$Notice.warning({
                title: "新增教育经历提醒",
                desc: "请选择专业",
                duration: 3,
              });
              return
            }
            /*if(!this.education.diplomasImage){
              this.$Notice.warning({
                title: "新增教育经历提醒",
                desc: "请上传毕业证书",
                duration: 3,
              });
              return
            }*/
            if(!this.education.diplomasNum){
              this.$Notice.warning({
                title: "新增教育经历提醒",
                desc: "请输入证书编号",
                duration: 3,
              });
              return
            }
            if(!this.education.learnStartTimeString){
              this.$Notice.warning({
                title: "新增教育经历提醒",
                desc: "请选择就读时间",
                duration: 3,
              });
              return
            }
            if(!this.education.learnEndTimeString){
              this.$Notice.warning({
                title: "新增教育经历提醒",
                desc: "请选择就读时间",
                duration: 3,
              });
              return
            }
            this.education.learnStartTime = JSON.stringify(this.education.learnStartTimeString).substring(1,11)
            this.education.learnEndTime = JSON.stringify(this.education.learnEndTimeString).substring(1,11)
            this.educationList.forEach(function(element){
              if(that.education.qualifiCations == element.enumName){
                that.education.qualifiLeavel = element.sortOrder
              }
            });
            addEducation(this.education).then(res => {
              if(res.code == 200){
                this.$Notice.success({
                  title: '新增教育经历提醒',
                  desc: '添加教育经历成功',
                  duration: 3,
                });
                this.$router.push({
                  name: 'hasjiaoyu'
                })
              }
              console.info(res)
            })
          },
          getUserEducation(){
            getUserEducation().then(res => {
              this.educationList = res.data.educationList
              this.rankList = res.data.rankList
              this.professionList = res.data.professionList
              console.info(res.data)
            })
          }
        },
        created() {
          this.getUserEducation()
        },
        components: {
          headers,
          footers
        }
    }
</script>
